<template>
  <el-card shadow="hover">
    <div class="pagination" slot="header">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-sizes="[1, 10, 15, 20]"
        :page-size="pageSize"
        :current-page.sync="currentPage"
        :layout="paginationLayout"
        :total="projects.length">
      </el-pagination>
    </div>
    <div v-if="showOperator" style="width: 100%; margin-bottom: 18px">
      <el-button :loading="tableLoading" icon="el-icon-refresh" @click="refreshTable" title="刷新" circle></el-button>
      <el-popover trigger="click" v-model="visible">
        <el-button slot="reference" icon="el-icon-plus" title="新建项目" circle></el-button>
        <ProjectForm @closeForm="handleCloseForm"></ProjectForm>
      </el-popover>
      <el-badge v-show="invitations.length > 0" :value="invitations.length" class="item" type="primary">
        <el-popover v-model="visibles.invitation">
          <el-button slot="reference" icon="el-icon-message" circle></el-button>
          <el-table
            :data="invitations"
            row-key="key"
            ref="invitationTable"
            id="invitationTable"
            size="mini"
            highlight-current-row>
            <el-table-column
              prop="projectId"
              label="ID"
              align="center"
              header-align="center"
            ></el-table-column>
            <el-table-column
              label="名称"
              prop="projectName"
              header-align="center"
            ></el-table-column>
            <el-table-column
              align="center"
              label="操作"
              header-align="center"
              width="120">
              <template slot-scope="scope">
                <el-button size="mini" icon="el-icon-check" @click="acceptOrDecline(scope.row.key, true)" circle></el-button>
                <el-button size="mini" icon="el-icon-close" @click="acceptOrDecline(scope.row.key, false)" type="danger" circle></el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-popover>
      </el-badge>
    </div>
    <el-table
    v-loading="tableLoading"
    :data="pageData"
    row-key="id"
    ref="projectTable"
    id="projectTable"
    size="mini"
    @row-click="rowSelect"
    @current-change="handleCurrentChange"
    highlight-current-row
    border>
      <el-table-column
        label="ID"
        prop="id"
        width="60"
        align="center"
        header-align="center"
      ></el-table-column>
      <el-table-column
        label="项目名称"
        prop="name"
        align="center"
        header-align="center"
      >
<!--        <template slot-scope="scope">-->
<!--          <el-popover trigger="click">-->
<!--            <div slot="reference">{{ compressText(scope.row.name, 5) }}</div>-->
<!--            <div style="display: flex; justify-content: center;">-->
<!--              <span>{{ scope.row.name }}</span>-->
<!--            </div>-->
<!--          </el-popover>-->
<!--        </template>-->
      </el-table-column>
      <el-table-column
        v-if="showOperator"
        label="操作"
        width="160"
        header-align="center"
        align="center">
        <el-button-group slot-scope="scope">
          <el-button size="small" icon="el-icon-document" title="去文档页面" @click="go('/document', scope.row.id)"></el-button>
          <el-button size="small" icon="el-icon-s-claim" title="去待办页面" @click="go('/todo', scope.row.id)"></el-button>
          <el-button size="small" icon="el-icon-pie-chart" title="去工作台" @click="go('/dashboard', scope.row.id)"></el-button>
        </el-button-group>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script>
import {getProjectData, getProjects, loadInvitations, updateInvitation} from '@/api/project'
import ProjectForm from '@/components/ProjectForm'
// import {getInfo} from '@/api/login'

export default {
  name: 'ProjectList',
  props: {
    showOperator: Boolean,
    paginationLayout: {
      type: String,
      default: 'total, prev, pager, next'
    },
    reload: Boolean
  },
  components: {
    ProjectForm
  },
  data () {
    return {
      projects: [],
      currentRow: undefined,
      pageSize: 10,
      currentPage: 1,
      visible: false,
      tableLoading: false,
      invitations: [],
      visibles: {
        invitation: false
      }
    }
  },
  computed: {
    pageData () {
      console.log((this.currentPage - 1) * this.pageSize + ', ' + this.currentPage * this.pageSize)
      return this.projects.slice((this.currentPage - 1) * this.pageSize, this.currentPage * this.pageSize)
    }
  },
  mounted () {
    this.loadData()
    this.loadInvitations()
  },
  methods: {
    acceptOrDecline (key, accept) {
      updateInvitation(key, accept).then(() => {
        this.$notify.success('操作成功')
        this.loadInvitations()
        this.loadData()
      }).catch(error => {
        this.$notify.error(error)
      })
    },
    loadInvitations () {
      loadInvitations().then(res => {
        this.invitations = res.data
        if (this.invitations.length === 0) this.visibles.invitation = false
      }).catch(error => {
        this.$notify.error(error)
      })
    },
    loadData () {
      getProjects().then(res => {
        this.$set(this, 'projects', res.data)
        // this.projects = res.data
      }).catch(res => {
        this.$notify.error({
          title: '加载用户项目失败',
          message: res.msg
        })
      })
    },
    rowSelect (row) {
      this.$emit('updateCurrProject', row.id, row.name, row.description)
      this.$store.dispatch('SetCurrentProject', row.id)
      getProjectData(row.id).then(res => {
        this.$store.commit('SET_CURRENT_PROJECT_DATA', res.data)
        // getInfo(res.data.creatorId).then(res => {
        //   this.$store.commit('SET_CURRENT_USER_DATA', res.data)
        // })
      })
      this.setCurrent(row)
    },
    setCurrent (row) {
      this.$refs.projectTable.setCurrentRow(row)
    },
    handleCurrentChange (val) {
      this.currentRow = val
    },
    handleSizeChange (val) {
      this.pageSize = val
    },
    handleCurrentPageChange (val) {
      this.currentPage = val
    },
    go (path, projectId) {
      this.$store.dispatch('SetCurrentProject', projectId)
      this.$router.push(path)
      this.$notify.info('当前ProjectId：' + this.$store.getters.currentProject)
    },
    handleCloseForm (state = false) {
      this.visible = state
      this.loadData()
    },
    refreshTable () {
      this.tableLoading = true
      setTimeout(() => {
        this.loadData()
        this.loadInvitations()
        this.tableLoading = false
      }, 300)
    },
    compressText (text, length = 6) {
      if (!text) return undefined
      if (text.length <= length) return text
      return text.substr(0, length) + '...'
    }
  },
  watch: {
    reload: {
      handler (newVal, oldVal) {
        this.refreshTable()
      },
      deep: true
    }
  }
}
</script>

<style lang="scss" scoped>
.invitation-item {
  margin: 20px 0;
}
</style>
